import Taro, { useState, useDidShow, useEffect } from '@tarojs/taro'
import { AtNavBar, AtInputNumber, AtListItem, AtButton } from 'taro-ui'
import servicePath from '../../config/apiUrl'
import { View, Text } from '@tarojs/components'
import 'taro-ui/dist/style/components/flex.scss'
import { axios } from 'taro-axios'
import "../cart/cart.scss"



function ShoppingCart(props) {

    const [userName, setuserName] = useState('')
    const [cartList, setCartList] = useState([{
        goodName: '包装娃娃菜',
        goodInfo: '产地：云南',
        goodImg: 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=601f4e2c1bd8bc3ec20801c8b28aa6c8/80cb39dbb6fd5266dc88c702a918972bd4073600.jpg',
        count: '1'
    }])


    const jumpToCart = () => {
        Taro.navigateTo({ url: '/pages/cart/cart' })
    }

    const getCart = (username) => {

        axios({
            method: 'post',
            url: servicePath.getCart,
            data: {
                'userName': username
            },
            withCredentials: true
        }).then(
            res => {
                console.log(res.data)
                setCartList(res.data.data)
            })
    }


    useEffect(() => {

        Taro.getStorage({
            key: 'userName',
            success: function (res) {
                console.log('userName=' + res.data)
                setuserName(res.data)
                getCart(res.data)
            }
        })

    }, [])



    return (
        <View>
            <AtNavBar
                onClickLeftIcon={this.handleClick}
                onClickRgIconSt={jumpToCart}
                onClickRgIconNd={this.handleClick}
                color='#000'
                rightFirstIconType='shopping-cart'
                rightSecondIconType='user'
                leftIconType='chevron-left'
            >
                <h6>您好 ~ 用户{userName}</h6>
            </AtNavBar>
            <View>
                {
                    cartList.map((item, index) => {
                        return (
                            <View key={index + item} className=' my-div'>
                                <View className='at-row my-pad'>
                                    <View className='at-col my-imgdiv at-col-1 at-col--auto'>
                                        <Image
                                            className=' my-img'
                                            src={item.goodImg}
                                        />
                                    </View>
                                    <View className='at-col my-info'>
                                        <View className='my-title'>{item.goodName}</View>
                                        <View className='my-priceAndCount at-row'>
                                            <View className='my-price at-col'>{item.goodPrice}元</View>
                                            <View className='my-countDiv at-col'>
                                                <AtInputNumber
                                                    min={0}
                                                    max={10}
                                                    step={1}
                                                    value={item.count}
                                                />
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            </View>


                        )
                    })
                }
            </View>
        </View>
    )

}

export default ShoppingCart 